<template>
    <div class="box">
        <div class="header">
            <el-avatar :size="70" src="http://pic2.zhimg.com/v2-0dc4e1abc7bf441be2fcbd34da8bdce9_b.jpg" style="margin-right:30px"></el-avatar>
            <div style="" class="name-word">
                <span style="font-size: 20px">代码不可能不对</span>
                <span style="font-size: 15px; color:rgba(102, 100, 100, 0.445)">啦啦啦！</span>
            </div>
        </div>
        <div class="function">
            <el-button><i class="el-icon-box" style="font-size:30px"></i> <span>我的物品</span></el-button>
            <router-link to="/aside"><el-button><i class="el-icon-message-solid" style="font-size:30px"></i> <span>闲置提醒</span></el-button></router-link>
            <el-button><i class="el-icon-message" style="font-size:30px"></i> <span>消息通知</span></el-button>
            <el-button><i class="el-icon-collection" style="font-size:30px"></i> <span>我的收藏</span></el-button>
            <el-button><i class="el-icon-time" style="font-size:30px"></i> <span>浏览历史</span></el-button>
            <el-button><i class="el-icon-shopping-cart-2" style="font-size:30px"></i> <span>购物车</span></el-button>
            <el-button><i class="el-icon-trophy" style="font-size:30px"></i> <span>我的成就</span></el-button>
            <el-button><i class="el-icon-basketball" style="font-size:30px"></i> <span>小游戏</span></el-button>
            <el-button><i class="el-icon-box" style="font-size:30px"></i> <span>我的物品</span></el-button>
            <el-button><i class="el-icon-s-tools" style="font-size:30px"></i> <span>设置</span></el-button>
            <el-button><i class="el-icon-delete-solid" style="font-size:30px"></i> <span>草稿箱</span></el-button>
            <el-button><i class="el-icon-phone" style="font-size:30px"></i> <span>联系客服</span></el-button>
        </div>
    </div>
</template>

<script>
export default {
    setup() {
        
    },
}
</script>

<style scoped>
.box {
  height: 100%;
  width: 100%;
  margin-bottom: 70px;
}
.header{
    display: flex;
    flex-direction: row;
    margin-top: 30px;
    margin-left: 30px;
}
.name-word{
    padding-top:10px;
    display: flex;
    flex-direction: column;
}
.name-word span{
    display: block;
    padding-bottom: 8px;
}
.function{
    margin: 20px;
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.el-button{
    width: 100px;
    height: 100px;
    margin: 5.8px;
    /* display: inline-flex; */
    
}
.el-button span{
    display: block;
    margin-top: 7px;
    padding: 0px;
    color: rgba(10, 8, 8, 0.445);
}

</style>
